Научете как да внедрите стабилно фронтенд визуално тестване с Chromatic и Percy. Пълен наръчник за разработчици: настройка, добри практики и напреднали техники.
Фронтенд визуално тестване: Задълбочен поглед върху интеграцията на Chromatic и Percy
В днешния забързан свят на уеб разработката, осигуряването на последователен и визуално привлекателен потребителски интерфейс (UI) в различни браузъри, устройства и размери на екрана е от първостепенно значение. Ръчното тестване на UI обаче е отнемащо време, податливо на грешки и често не успява да улови фини визуални регресии. Тук се намесва фронтенд визуалното тестване, предлагайки мощно решение за автоматизиране на проверките на UI и поддържане на визуална цялост през целия цикъл на разработка. Този изчерпателен наръчник изследва две водещи платформи за визуално тестване: Chromatic и Percy, подробно описвайки тяхната интеграция, ползи и добри практики за разработчици по целия свят.
Разбиране на фронтенд визуалното тестване
Фронтенд визуалното тестване, известно още като тестване на визуална регресия или тестване със скрийншотове, автоматизира процеса на сравняване на UI скрийншотове с базова линия за откриване на визуални промени. То позволява на разработчиците да идентифицират неочаквани промени в потребителския интерфейс, причинени от модификации на кода, актуализации на дизайна или актуализации на браузъра. Този подход значително намалява риска от пускане на визуално счупени или непоследователни потребителски интерфейси за потребителите, като в крайна сметка подобрява потребителското изживяване.
Ползите от визуалното тестване
- Ранно откриване на грешки: Улавя визуални грешки рано в цикъла на разработка, преди да достигнат до продукция.
- Подобрено качество на кода: Насърчава разработчиците да пишат по-чист и по-лесен за поддръжка код.
- По-бързи цикли на разработка: Автоматизира процесите на тестване, спестявайки време и ресурси.
- Подобрено потребителско изживяване: Осигурява последователен и визуално привлекателен потребителски интерфейс във всички платформи.
- Намалени усилия за ръчно тестване: Освобождава QA екипите да се съсредоточат върху по-сложни сценарии за тестване.
- Повишена увереност в пусканията: Осигурява по-голяма увереност, че потребителският интерфейс функционира както се очаква.
Представяне на Chromatic и Percy
Chromatic и Percy са водещи облачни платформи за визуално тестване, които рационализират процеса на визуално тестване. И двете платформи предлагат сходни функционалности, включително генериране на скрийншотове, визуално сравнение и интеграция с популярни CI/CD пайплайни. Те обаче имат и уникални характеристики и силни страни. Нека се задълбочим във всяка платформа.
Chromatic
Chromatic, разработен от Storybook, е дълбоко интегриран в екосистемата на Storybook. Storybook е мощен инструмент за изграждане и документиране на UI компоненти в изолация. Chromatic разширява възможностите на Storybook, като предоставя функции за визуално тестване и преглед. Той опростява процеса на тестване на UI компоненти, като позволява на разработчиците да заснемат скрийншотове на компоненти в различни състояния и конфигурации. След това Chromatic сравнява тези скрийншотове с базова линия, като подчертава всякакви визуални разлики.
Основни характеристики на Chromatic:
- Тясна интеграция със Storybook: Безпроблемно се интегрира със Storybook за разработка и тестване, базирани на компоненти.
- Автоматично генериране на скрийншотове: Автоматично генерира скрийншотове на UI компоненти в различни състояния.
- Визуално сравнение: Сравнява скрийншотове с базова линия и подчертава визуални промени.
- Преглед и сътрудничество: Предоставя съвместен интерфейс за преглед и одобряване на визуални промени.
- CI/CD интеграция: Интегрира се с популярни CI/CD пайплайни, като Jenkins, CircleCI и GitHub Actions.
- Тестване за достъпност: Предоставя основни проверки за достъпност.
Percy
Percy, придобит от BrowserStack, е многостранна платформа за визуално тестване, която поддържа различни тестови рамки и работни процеси за разработка. Тя позволява на разработчиците да заснемат скрийншотове на цели страници, специфични компоненти или дори динамично съдържание. Сложната визуална сравнителна алгоритмия на Percy може да открие дори най-малките визуални несъответствия. Тя предлага цялостна платформа за управление на визуални регресии и осигуряване на последователност на потребителския интерфейс.
Основни характеристики на Percy:
- Поддръжка на различни платформи: Поддържа различни тестови рамки, включително Jest, Cypress и Selenium.
- Генериране на скрийншотове: Заснема скрийншотове на цели страници, специфични компоненти и динамично съдържание.
- Визуално сравнение: Сравнява скрийншотове, използвайки усъвършенствани алгоритми за визуално сравнение.
- Сътрудничество и преглед: Предоставя съвместен интерфейс за преглед и одобряване на визуални промени.
- CI/CD интеграция: Интегрира се с популярни CI/CD пайплайни.
- Тестване на адаптивен дизайн: Поддържа тестване на адаптивни дизайни в различни размери на екрана и устройства.
- Тестване за съвместимост с браузъри: Тества срещу различни браузъри и версии.
Настройка на визуално тестване с Chromatic
Нека разгледаме процеса на настройка на визуално тестване с помощта на Chromatic, приемайки, че имате настроен проект Storybook. Следващите стъпки предоставят общ преглед; консултирайте се с официалната документация на Chromatic за най-актуални инструкции. Примерът е базиран на настройка с React и Storybook; подобни концепции се прилагат и за други рамки.
Предварителни изисквания
- Проект Storybook, настроен с компоненти.
- Chromatic акаунт (безплатен или платен).
- Инсталирани Node.js и npm или yarn.
Инсталация и конфигурация
- Инсталирайте Chromatic CLI:
npm install -g chromatic - Удостоверяване с Chromatic:
Това ще ви подкани да влезете във вашия Chromatic акаунт. След това ще настрои необходимата конфигурация.
chromatic login - Стартирайте Chromatic:
Chromatic ще изгради вашия Storybook и ще го качи в платформата Chromatic. След това ще направи скрийншотове на вашите компоненти и ще ги сравни с базова линия.
chromatic - Преглед и одобрение на промените: Chromatic ще предостави връзка към интерфейса на Chromatic, където можете да прегледате всички открити визуални промени. След това можете да одобрите или отхвърлите промените.
- Интеграция с CI/CD: Интегрирайте Chromatic във вашия CI/CD пайплайн (напр. GitHub Actions, GitLab CI) за автоматизирано тестване при всеки pull request. Стъпките варират в зависимост от услугата за CI/CD, която използвате; вижте документацията на Chromatic за подробни инструкции. Например, използвайки GitHub actions, можете да добавите задача към файла на вашия работен поток, която стартира Chromatic, след като вашите компилации и модулни тестове преминат.
Пример: Интегриране на Chromatic с GitHub Actions
Създайте нов файл за работен поток (напр. .github/workflows/chromatic.yml) със следното съдържание (коригирайте `CHROMATIC_PROJECT_TOKEN` към токена на вашия проект):
name: Chromatic
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
chromatic-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Publish to Chromatic
run: |
npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Use a secret to store the token
Този работен поток ще задейства Chromatic при всяко изпращане (push) и заявка за сливане (pull request) към клона `main`. Не забравяйте да замените `CHROMATIC_PROJECT_TOKEN` с вашия действителен токен на Chromatic проект, съхранен като GitHub тайна.
Настройка на визуално тестване с Percy
Настройката на визуално тестване с Percy включва подобни стъпки като Chromatic, но се фокусира върху интеграцията с вашата съществуваща тестова рамка. Ето едно общо ръководство, със специфични инструкции, зависещи от вашата рамка (напр. React с Jest, Vue с Cypress).
Предварителни изисквания
- Percy акаунт (безплатен или платен).
- Тестова рамка (напр. Jest, Cypress, Selenium).
- Инсталирани Node.js и npm или yarn.
Инсталация и конфигурация
- Инсталирайте Percy CLI:
npm install -D @percy/cli - Удостоверяване с Percy: Създайте Percy проект в платформата Percy и вземете токена на вашия проект. Ще зададете този токен като променлива на средата (напр. `PERCY_TOKEN`) във вашата CI/CD конфигурация.
- Интегрирайте Percy с вашата тестова рамка:
Това включва добавяне на команди на Percy към вашите тестови скриптове. Точните стъпки варират в зависимост от вашата тестова рамка. Например, с Cypress, ще инсталирате пакета `@percy/cypress` и ще добавите команда за правене на Percy снимки. С Jest, вероятно ще използвате директно Percy API или специализиран адаптер.
Пример, използващ Cypress (във вашите Cypress тестове – напр.
cypress/integration/my_spec.js):it('should render the homepage', () => { cy.visit('/'); cy.percySnapshot('Homepage'); });В горния пример с Cypress,
cy.percySnapshot('Homepage')прави скрийншот на текущото състояние на страницата и го качва в Percy. - Конфигуриране на CI/CD интеграция:
Във вашата CI/CD конфигурация, уверете се, че Percy се изпълнява, след като вашите тестове са завършили. Обикновено ще зададете променливата на средата `PERCY_TOKEN` и след това ще изпълните командата на Percy CLI.
Пример, използващ GitHub Actions (във файла на работния поток):
jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Run tests run: npm test # Replace with your test command - name: Percy Snapshot if: github.event_name == 'pull_request' # Only run Percy on pull requests run: | npx percy snapshot --token $PERCY_TOKEN env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} # Use a GitHub secret - Преглед и одобрение на промените:
Percy ще предостави връзка към своята платформа, където можете да прегледате визуалните разлики и да одобрите или отхвърлите промените.
Добри практики за визуално тестване
Ефективното визуално тестване изисква обмислен подход. Ето някои добри практики за максимизиране на ползите му:
1. Дефинирайте ясни базови линии
Установете добре дефинирана базова линия. Това е първоначалното състояние на вашия потребителски интерфейс, спрямо което ще бъдат сравнявани всички бъдещи скрийншотове. Уверете се, че тази базова линия точно отразява желаното визуално излъчване на вашето приложение. Редовно преглеждайте и актуализирайте вашите базови линии, за да сте сигурни, че са актуални и отразяват текущите промени в дизайна.
2. Фокусирайте се върху критични UI елементи
Приоритизирайте тестването на най-критичните UI елементи и потребителски потоци. Това включва елементи, които често се използват, имат значително въздействие върху потребителското изживяване или са податливи на промени. Не чувствайте необходимост да тествате всеки отделен пиксел; фокусирайте се върху областите, които са най-важни за вашите потребители.
3. Тествайте в различни среди
Тествайте потребителския си интерфейс в различни среди, включително различни браузъри (Chrome, Firefox, Safari, Edge и т.н.), устройства (настолни компютри, таблети, смартфони) и размери на екрана. Това ще помогне да се гарантира, че потребителският ви интерфейс се изобразява последователно във всички платформи.
4. Работа с динамично съдържание
Ако вашият потребителски интерфейс съдържа динамично съдържание (напр. данни, извлечени от API), ще трябва да се справите с това внимателно. Разгледайте техники като имитиране на API отговори за създаване на предвидими тестови данни или използване на детерминирани набори от данни. Уверете се, че имате стратегия за последователно управление на динамичното съдържание в различните компилации.
5. Справяне с непостоянни тестове
Непостоянните тестове са тестове, които понякога преминават успешно, а понякога не. Те могат да бъдат основен източник на разочарование. Идентифицирайте и отстранете основните причини за непостоянните тестове. Това може да включва коригиране на вашите тестови конфигурации, увеличаване на времевите лимити или подобряване на надеждността на вашите тестови данни. Ако даден тест постоянно не успява да премине, инвестирайте време за отстраняване на грешки и отстраняване на проблема. Не просто игнорирайте провалите.
6. Интегрирайте с CI/CD
Интегрирайте процеса си на визуално тестване във вашия CI/CD пайплайн. Това ви позволява автоматично да изпълнявате визуални тестове при всяка промяна в кода, като гарантирате, че всички визуални регресии се улавят рано в цикъла на разработка. Автоматизацията е ключова за спестяване на време и намаляване на риска от човешка грешка.
7. Използвайте последователна тестова среда
Уверете се, че вашата тестова среда е максимално съвместима с вашата продукционна среда. Това включва използване на същите браузъри, операционни системи и шрифтове. Една последователна среда ще подобри точността на вашите визуални сравнения.
8. Документирайте вашата тестова стратегия
Документирайте вашата стратегия за визуално тестване, включително кои компоненти се тестват, тестовите среди и очакваните резултати. Тази документация ще помогне да се гарантира, че процесът ви на тестване е последователен и поддържан с течение на времето. Това е особено важно при въвеждане на нови членове на екипа или при извършване на значителни промени в потребителския интерфейс.
9. Приоритизирайте достъпността
Въпреки че Chromatic и Percy предлагат известно ниво на проверка на достъпността, приоритизирайте тестването за достъпност. Интегрирайте проверките за достъпност във вашите визуални тестове, за да гарантирате, че потребителският ви интерфейс е достъпен за всички потребители. Разгледайте указанията на WCAG.
10. Редовно преглеждайте и актуализирайте тестовете
С развитието на вашия потребителски интерфейс, редовно преглеждайте и актуализирайте вашите визуални тестове. Това включва актуализиране на базовите линии, добавяне на нови тестове за нови функции и премахване на тестове за остарели компоненти. Това гарантира, че вашите тестове продължават да предоставят стойност.
Избор на правилната платформа: Chromatic срещу Percy
Най-добрият избор между Chromatic и Percy зависи от вашите специфични нужди и настройка на проекта:
Обмислете Chromatic, ако:
- Вече използвате Storybook за разработка, базирана на компоненти.
- Искате тясна интеграция с функциите на Storybook.
- Предпочитате опростена настройка и лекота на използване, особено ако имате съществуваща настройка на Storybook.
- Искате вградени проверки за достъпност.
Обмислете Percy, ако:
- Използвате тестова рамка, различна от Storybook, като Jest, Cypress или Selenium.
- Имате нужда от поддръжка за по-широк набор от тестови сценарии.
- Изисквате разширени функции като тестване на адаптивен дизайн или тестване за съвместимост с браузъри.
- Предпочитате по-независимо от рамката решение.
Както Chromatic, така и Percy са отлични избори за визуално тестване. Оценете платформите въз основа на вашите съществуващи инструменти, изисквания на проекта и предпочитания на екипа. Помислете за започване с безплатен пробен период или безплатен план, за да оцените функциите и възможностите. Много екипи дори използват и двата инструмента за различни части на проекта.
Напреднали техники и интеграции
Освен основите, платформите за визуално тестване предлагат напреднали техники за справяне с по-сложни UI сценарии и интеграции с други инструменти за разработка.
1. Тестване на динамично съдържание: Мокиране на API
Едно от най-големите предизвикателства във визуалното тестване е управлението на динамичното съдържание. За да се справите с това, помислете за имитиране на API отговори, за да гарантирате, че тестовите данни са предвидими. Това ще ви позволи да заснемете последователни скрийншотове и да предотвратите фалшиви положителни или отрицателни резултати, причинени от постоянно променящи се данни. Използвайте инструменти като Mock Service Worker (MSW) или функцията за мокиране на Jest за имитиране на API извиквания.
2. Тестване на интерактивни UI компоненти
За тестване на интерактивни UI компоненти (напр. падащи менюта, модални прозорци), често трябва да симулирате потребителски взаимодействия. Това може да включва програмно задействане на събития (напр. щраквания, задържане на курсора, въвеждане от клавиатурата) с помощта на вашата тестова рамка. Инструменти като Cypress могат да симулират потребителско поведение по-директно.
3. Интеграция на тестване за достъпност
Интегрирайте инструменти за тестване на достъпността (напр. axe-core) във вашите визуални тестове. Chromatic и Percy могат да предоставят основни проверки за достъпност; за по-напреднало тестване, помислете за извършване на одит за достъпност като част от вашия тестов пайплайн и интегрирайте тези резултати с резултатите от вашите визуални тестове. Това ще помогне да се гарантира, че вашият потребителски интерфейс е достъпен за всички потребители. Достъпността не е само за това да направите потребителския интерфейс достъпен, а за осигуряване на приобщаващ дизайн за потребители с разнообразни нужди.
4. Библиотеки с UI компоненти
Визуалното тестване е особено полезно при работа с библиотеки с UI компоненти (напр. Material UI, Ant Design). Създайте визуални тестове за всеки компонент във вашата библиотека, за да осигурите последователност и да предотвратите визуални регресии при актуализиране на библиотеката или интегрирането ѝ във вашите проекти.
5. Интегриране с дизайн системи
Ако използвате система за дизайн, свържете вашите визуални тестове с документацията на вашата система за дизайн. Това ще ви позволи бързо да идентифицирате всякакви визуални несъответствия между вашия потребителски интерфейс и спецификациите на вашата система за дизайн. Синхронизирайте UI компонентите с компонентите на системата за дизайн. Това ще помогне за поддържане на последователността на дизайна във вашите продукти.
Съображения за достъпност
Достъпността трябва да бъде основен компонент на вашата стратегия за визуално тестване. Въпреки че Chromatic и Percy предлагат някои основни проверки за достъпност, трябва да внедрите цялостни одити за достъпност като част от вашия тестов процес.
1. Автоматизирани инструменти за тестване на достъпност
Използвайте автоматизирани инструменти за тестване на достъпност като Axe, Lighthouse или Pa11y във вашия CI/CD пайплайн. Тези инструменти сканират вашия потребителски интерфейс за нарушения на достъпността и предоставят подробни доклади за всички открити проблеми.
2. Ръчно тестване за достъпност
Допълнете автоматизираното тестване с ръчно тестване. Извършвайте ръчни проверки, използвайки екранни четци (напр. JAWS, NVDA, VoiceOver), навигация с клавиатура и анализатори на цветен контраст, за да идентифицирате всички проблеми, които автоматизираните инструменти могат да пропуснат. Обмислете наемане на консултанти по достъпност за извършване на пълни одити.
3. Прегледи на код
Включете прегледите за достъпност във вашия процес на преглед на кода. Накарайте разработчиците да преглеждат кода си за проблеми с достъпността. Обучете екипа си за най-добрите практики за достъпност и ги насърчете да бъдат внимателни към достъпността през целия процес на разработка.
Заключение: Бъдещето на фронтенд визуалното тестване
Фронтенд визуалното тестване вече не е лукс, а необходимост за модерната уеб разработка. Чрез интегриране на платформи като Chromatic и Percy във вашия работен процес, можете значително да подобрите качеството, последователността и поддръжката на вашия потребителски интерфейс. Използването на платформи за визуално тестване ще нараства с увеличаването на сложността на потребителския интерфейс и продължаващото търсене на удобни за ползване, адаптивни и достъпни уеб приложения. Тъй като уебът продължава да се развива, визуалното тестване ще стане още по-критично в процеса на разработка.
Следвайки най-добрите практики, очертани в този наръчник, и оставайки в течение с най-новите постижения във визуалното тестване, можете да изградите по-стабилно, надеждно и визуално привлекателно потребителско изживяване за вашите потребители по целия свят. Редовно оценявайте вашата стратегия за тестване, бъдете в крак с новите инструменти и техники и се адаптирайте към постоянно променящите се изисквания на фронтенд разработката. Непрекъснатото подобрение е от съществено значение за продължителен успех във визуалното тестване.